"use client";

import { useSearchParams } from "next/navigation";
import { useCallback, useMemo } from "react";
import type { RegistryItem } from "shadcn/registry";

import ComponentCard from "@/components/component-card";
import ComponentDetails from "@/components/component-details";
import ComponentLoader from "@/components/component-loader-client";
import PageGrid from "@/components/page-grid";
import { getComponents } from "@/lib/utils";
import type { RegistryTag } from "@/registry/registry-tags";

import SearchField from "./search-field";

export default function ComponentsContainer() {
  const searchParams = useSearchParams();
  const tags = useMemo(() => {
    return (searchParams
      ?.get("tags")
      ?.split(",")
      .filter(Boolean)
      .map((tag) => tag.replace(/\+/g, " ")) || []) as RegistryTag[];
  }, [searchParams]);

  const filtered = useMemo(() => {
    if (!tags.length) return [];
    return getComponents(tags);
  }, [tags]);

  const updateTags = useCallback((newTags: string[]) => {
    const url = new URL(window.location.href);
    if (newTags.length > 0) {
      const formattedTags = newTags
        .map((tag) => tag.replace(/\s+/g, "+"))
        .join(",");
      url.searchParams.set("tags", formattedTags);
    } else {
      url.searchParams.delete("tags");
    }
    window.history.replaceState({}, "", url.toString());
  }, []);

  return (
    <div className="space-y-4">
      <SearchField onTagChange={updateTags} selectedTags={tags} />
      <PageGrid>
        {filtered.map((component: RegistryItem) => (
          <ComponentCard
            component={component}
            isSearchPage
            key={component.name}
          >
            <ComponentLoader component={component} />
            <ComponentDetails component={component} />
          </ComponentCard>
        ))}
        {tags.length > 0 && filtered.length === 0 && (
          <div className="col-span-full py-8 text-center">
            <p className="text-muted-foreground">
              No components found for the selected tags.
            </p>
          </div>
        )}
      </PageGrid>
    </div>
  );
}
